<template>
	<view class="content">
		<comtarbar class="comtarbar">
			<template #center>
				<view class="title">{{ title }}</view>
			</template>
			<template #right>
				<view v-if="isOpacty" class="btn" @tap="tapMethods">确定</view>
			</template>
		</comtarbar>
		<view class="memberbox">
			<template v-for="item in getGroupInfo.user_list">
				<view class="member-item" :class="judge(item.user._id) ? 'noselect' : ''" :key="item.user._id" v-if="isShow(item)" @tap="select(item.user._id)">
					<image :src="item.user.avatars" mode="aspectFill"></image>
					<view class="m_name">{{ item.nickName }}</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import request from '../../../api/request.js';
export default {
	data() {
		return {
			isOpacty: false,
			type: '',
			list: [],
			title: ''
		};
	},
	onLoad(options) {
		let { type, id } = options;
		this.type = type;
		this.id = id;
		if (type == 'management') {
			this.isOpacty = true;
			this.title = '移除群成员';
		} else if (type == 'transfer') {
			this.isOpacty = true;
			this.title = '转让群主';
		} else {
			this.isOpacty = false;
			this.title = '查看群成员';
		}
	},
	computed: {
		...mapGetters(['getUser', 'getGroupInfo', 'getG_nickName'])
	},
	methods: {
		isShow(item) {
			let isType = this.type == 'management' || this.type == 'transfer';
			if (item.user._id == this.getGroupInfo.manager && isType) {
				return false;
			} else {
				return true;
			}
		},
		select(id) {
			if (this.type == 'transfer') {
				//转让群主操作
				this.list = [];
				this.list.push(id);
				console.log(this.list)
			} else if (this.type == 'management') {
				//删除群成员
				let index = this.list.findIndex(item => {
					return item == id;
				});
				if (index >= 0) {
					this.list.splice(index, 1);
				} else {
					this.list.push(id);
				}
			} else {
				//查看群成员
			}
		},
		// 判断该成员是否被选中
		judge(id) {
			if (this.isOpacty) {
				let index = this.list.findIndex(item => {
					return item == id;
				});
				if (index >= 0) {
					return false;
				} else {
					return true;
				}
			} else {
				return false;
			}
		},

		// 点击确定按钮触发的事件
		async tapMethods() {
			if (this.type == 'transfer') {
				//转让群主操作
				if (this.list.length > 0) {
					let res = await request({
						url: '/group/transfer',
						data: {
							token:uni.getStorageSync("token"),
							id: this.id,
							manager: this.list[0]
						},
						method: 'POST'
					});
					if(res[1].data.nModified){
						uni.showToast({
							title:"群主转让成功",
							duration:1000
						})
						this.$store.dispatch("getInfo",this.id)
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							})
						},1200)
					}
				} else {
					uni.showToast({
						title: '没有选择要转让的群成员',
						icon: 'none',
						duration: 1000
					});
				}
			} else if (this.type == 'management') {
				//删除群成员
				console.log(this.list)
				if (this.list.length > 0) {
					let res = await request({
						url: '/group/management',
						data: {
							token: uni.getStorageSync('token'),
							id: this.id,
							list: this.list
						},
						method: 'POST'
					});
					console.log(res)
					if(res[1].data.nModified){
						uni.showToast({
							title:"成员删除成功",
							duration:1000
						})
						this.$store.dispatch("getInfo",this.id)
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							})
						},1200)
					}
				} else {
					uni.showToast({
						title: '没有选择要移除的群成员',
						icon: 'none',
						duration: 1000
					});
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../../commons/css/mycss.scss';
.comtarbar {
	background: #f4f4f4;
	.btn {
		height: 60rpx;
		width: 100rpx;
		background: #37a603;
		font-size: 32rpx;
		color: white;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
	}
}
.memberbox {
	padding-top: 88rpx;
	margin: 20rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	.member-item {
		width: 20%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
		position: relative;
		.manager {
			position: absolute;
			top: -20rpx;
			right: 4rpx;
			image {
				width: 40rpx;
				height: auto;
			}
		}
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
		}
		.m_name {
			margin-top: 10rpx;
			width: 100rpx;
			text-align: center;
			font-size: 26rpx;
			color: rgba(25, 29, 35, 0.5);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.m_imgbox {
			width: 100rpx;
			height: 100rpx;
			background: #ffe431;
			border-radius: 10%;
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				height: 60rpx;
				width: 60rpx;
			}
		}
	}
}
.noselect {
	opacity: 0.4;
}
</style>
